<template>
  <!-- 这是一个投放国家/地区选择器  区分热门城市与全部城市 -->
  <div class="country-layout">
    <em v-if="value.length<(hotCountry.length+normalCountry.length)" class="pointer" @click="handleAllAdd">添加全部</em>
    <em v-else class="pointer" @click="handleAddDel">删除全部</em>

    <el-select style="width: 100%;" :placeholder="placeholder" :value="value" :multiple="multiple" :disabled="disabled" @change="handleChange">
      <el-option-group v-for="group in countryOp" :key="group.label" :label="group.label">
        <el-option v-for="item in group.options" :key="item.short" :value="item.short" :label="item.name">
          <p class="flex">
            <span>{{ item.name }}</span>
            <country-flag :country="item.short" size="normal" style="margin-top: -2px;" />
          </p>
        </el-option>
      </el-option-group>
    </el-select>
  </div>
</template>
<script>
import {
  findCountryByQuery
} from '@/utils/index.js'

export default {
  name: '', // ·������

  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // 可供选择的初始数据
    cities: {
      type: [String, Object],
      default: function() {
        return []
      }
    },

    // 是否可以选择中国
    flag: {
      type: Boolean,
      default: function() {
        const flag = this.$store.state.user.unit === 'USD'
        return !flag
      }
    },

    value: Object,
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    //
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      countryOp: [],
      hotCountry: [],
      normalCountry: []
    }
  },
  computed: {

  },
  watch: {
    cities: {
      deep: true,
      immediate: true,
      handler: function(newV, oldV) {
        const arr = findCountryByQuery(this.cities, true)
        const hotArr = ['CN', 'US', 'JP', 'KR', 'HK', 'TW']

        const hotOptions = []
        const normalOptions = []

        arr.forEach(item => {
          if (hotArr.indexOf(item.short) > -1) {
            hotOptions.push(item)
          } else {
            normalOptions.push(item)
          }
        })

        normalOptions.sort(function(a, b) {
          return (a.short + '').localeCompare(b.short + '')
        })
        this.hotCountry = JSON.parse(JSON.stringify(hotOptions))
        this.normalCountry = JSON.parse(JSON.stringify(normalOptions))

        const res = []
        if (hotOptions.length) {
          res.push({
            label: '热门国家/地区',
            options: [...hotOptions]
          })
        }
        if (normalOptions.length) {
          res.push({
            label: '全部国家/地区',
            options: [...normalOptions]
          })
        }

        this.countryOp = JSON.parse(JSON.stringify(res))
      }
    }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    handleChange(arr) {
      this.$emit('change', arr)
    },
    // 添加全部
    handleAllAdd() {
      const arr = []
      this.hotCountry.forEach(item => {
        arr.push(item.short)
      })
      this.normalCountry.forEach(item => {
        arr.push(item.short)
      })
      this.$emit('change', [...arr])
    },

    // 删除全部
    handleAddDel() {
      this.$emit('change', [])
    }
  }
}
</script>

<style scoped lang="scss">
  .country-layout {
    width: 100%;
    position: relative;

    em {
      position: absolute;
      transform: translateY(-100%);
      top: -0.04em;
      right: 4px;

    }

  }
</style>
